<template>
	<view>
	<view class="search-container">
		<!-- 搜索栏 -->
		<uni-search-bar v-model="kw" @input="input" cancelButton="none" :radius="30"></uni-search-bar>
	</view>
	<!-- 搜索标签 -->
		<view v-if="kw !== ''"  class="search-list">
			<view @click="goList(item.goods_id)" class="search-item" v-for="(item,index) in searchList" :key='index'>
				<text class="search-name">{{item.goods_name}}</text>
				<uni-icons type="arrowright"></uni-icons>
			</view>
		</view>
		<!-- 搜索历史tag -->
			<view v-else class="history">
				<!-- 标题 -->
					<view v-if="isDel !== 0" class="history-title" @click="delHistory">
						<text>搜索历史</text>
						<uni-icons type="trash"></uni-icons>
					</view>
					<view v-else >
            <!-- 啥也不显示 -->
					</view>
				<!-- 历史内容 -->
				<view class="history-content">
					<view class="tag-container" v-for="(item, index) in historyRevers" :key="index">
						<uni-tag @click="getHistory(item)" :text="item" type="success"></uni-tag>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
  	/**
  	 * 1. 搜索历史数据来源 - 在请求成功后将用户输入的值保存到history数组当中,渲染的时候使用computed对history进行反转
  	 * 2. 去重,并保证历史输入的顺序
  	 * 3. 持久化存储
  	 */
	export default {
		data() {
			return {
				searchList:[],
				timer:null,
				//页面加载时就要取出历史数据
				history: JSON.parse(uni.getStorageSync('history') || '[]'),
				// 记录搜索历史
				kw: '',
				// 判断删除搜索按钮显示隐藏
				isDel:''
			};
		},
		onLoad(){
			
		},
		computed: {
			// 把后添加的数据 进行反转
					historyRevers() {
						return [...this.history].reverse()
					},
			// 判断是否存在搜索记录
					isHistory(){
						this.isDel = this.history.length
					}
				},
		methods:{
      // 跳转到商品列表页面
      goList(id){
       console.log(id)
       uni.navigateTo({
         url:'/subpkg/goods-list/goods-list?query=' + id
       })
      },
			// 搜索功能实现
			 input(value){
				 this.kw = value
			clearTimeout(this.timer)
				this.timer = setTimeout(async()=>{
					// 如果去掉两侧空格 没有数据 让其return
					if(value.trim() === ''){
						// 置空显示的内容
						this.searchList = []
						return
					}
					// 发起搜索请求
					const{ data: { message,meta } } = await uni.$http.get('/api/public/v1/goods/qsearch',{
						query:value
					})
					this.kw = value
					this.saveHistory()
					if(meta.status !== 200 ) return uni.$showMsg()
					this.searchList = message
				},500)
				// 储存搜索历史
			},
			// 保存搜索历史
			saveHistory(){
				if(this.history.indexOf(this.kw) === -1 ){
					this.history.push(this.kw)
					// 持久化储存 (session)
				uni.setStorageSync('history', JSON.stringify(this.history))
				}
			},
			// 获取搜索历史的数据 进行搜索
			getHistory(item){
				this.input(item)
			},
			delHistory(){
				console.log(1)
				this.history = []
				uni.removeStorageSync('history','[]')
			}
		}
	}
</script>

<style lang="scss">
.uni-searchbar{
	background-color: #c00000;
}
.search-container{
	position: sticky;
	top: 0;
}
.search-list{
.search-item{
		padding: 13px 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
}
.search-name{
	font-size: 12px;
	overflow:hidden; //超出的文本隐藏
	text-overflow:ellipsis; //溢出用省略号显示
	white-space:nowrap; //溢出不换行
}
}
	.history {
			margin: 5px;
		.history-title {
			display: flex;
			justify-content: space-between;
			padding: 12px 4px;
			border-bottom: 1px solid #eee;
			font-size: 12px;
			margin: 5px;
		}

		.history-content {
			display: flex;
			.tag-container {
				margin: 4px 0 0 4px;
			}
		}
	}
	.disN{
		opacity: 0;
	}
	.disY{
		opacity: 1;
	}
</style>
